<template>
  <div class="header-container">
    <el-menu router class="el-menu-demo" mode="horizontal">
      <el-menu-item class="webTitle" index="/">Wills博客</el-menu-item>
      <el-menu-item class="say">愿你出走半生，归来仍是少年。</el-menu-item>
      <el-menu-item class="timeLine">关于</el-menu-item>
      <el-menu-item class="courseList">分类</el-menu-item>
      <el-menu-item class="courseList">课程列表</el-menu-item>
      <el-menu-item class="about">时光轴</el-menu-item>
      <!-- <el-submenu class="user" index="3">
        <template slot="title">
          <el-avatar shape="circle" :size="40" :src="avatarUrl"></el-avatar>
          <span>Wills</span>
        </template>
        <el-menu-item index="2-1">用户中心</el-menu-item>
        <el-menu-item index="2-2">评论管理</el-menu-item>
        <el-menu-item index="2-3">退出登录</el-menu-item>
      </el-submenu>-->
    </el-menu>
  </div>
</template>

<script>
export default {
    data() {
        return {
            avatarUrl: 'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png',
            searchContent: ''
        }
    },
    methods: {
        search() {
        }
    },
}
</script>

<style lang="less" scoped>
.header-container {
  .el-menu {
    .say {
      color: #409eff;
      font-size: 13px;
    }
    .webTitle {
      font-size: 23px;
      color: #4f4f4f;
    }
    .user,
    .courseList,
    .about,
    .timeLine {
      float: right;
    }
  }
}
</style>